<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>棋剑乐府查战功出勤系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(90deg, #2c3e50, #1a2a6c);
            color: white;
            padding: 25px;
            text-align: center;
            position: relative;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .content {
            display: flex;
            padding: 20px;
            gap: 25px;
        }
        
        .upload-section {
            flex: 1;
            background: linear-gradient(145deg, #e9ecef, #dee2e6);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .results-section {
            flex: 2;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .section-title {
            font-size: 1.8rem;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid #3498db;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title i {
            color: #e74c3c;
        }
        
        .file-upload {
            background-color: white;
            border: 2px dashed #3498db;
            border-radius: 10px;
            padding: 25px;
            text-align: center;
            margin-bottom: 25px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .file-upload:hover {
            background-color: #f8f9fa;
            border-color: #e74c3c;
        }
        
        .file-upload i {
            font-size: 3.5rem;
            color: #3498db;
            margin-bottom: 15px;
        }
        
        .file-upload h3 {
            margin-bottom: 15px;
            color: #2c3e50;
        }
        
        .file-info {
            margin-top: 10px;
            font-size: 0.9rem;
            color: #6c757d;
            background-color: #e9ecef;
            padding: 8px;
            border-radius: 5px;
        }
        
        .btn {
            display: inline-block;
            background: linear-gradient(90deg, #3498db, #2980b9);
            color: white;
            padding: 14px 28px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
            margin-top: 15px;
            width: 100%;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(52, 152, 219, 0.5);
            background: linear-gradient(90deg, #2980b9, #3498db);
        }
        
        .btn:disabled {
            background: linear-gradient(90deg, #95a5a6, #7f8c8d);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .btn-analyze {
            background: linear-gradient(90deg, #e74c3c, #c0392b);
            box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
        }
        
        .btn-analyze:hover {
            background: linear-gradient(90deg, #c0392b, #e74c3c);
            box-shadow: 0 6px 15px rgba(231, 76, 60, 0.5);
        }
        
        .results-container {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .zero-increase, .top-increase {
            background-color: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .top-increase {
            background: linear-gradient(145deg, #f8f9fa, #e9ecef);
        }
        
        .table-container {
            overflow-x: auto;
            margin-top: 15px;
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 8px;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 600px;
        }
        
        th {
            background: linear-gradient(90deg, #3498db, #2980b9);
            color: white;
            padding: 15px;
            text-align: left;
            position: sticky;
            top: 0;
        }
        
        td {
            padding: 12px 15px;
            border-bottom: 1px solid #dee2e6;
        }
        
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        tr:hover {
            background-color: #e9f7fe;
        }
        
        .no-data {
            text-align: center;
            padding: 40px;
            color: #6c757d;
            font-size: 1.2rem;
        }
        
        .no-data i {
            font-size: 4rem;
            margin-bottom: 20px;
            color: #bdc3c7;
        }
        
        .instructions {
            background: linear-gradient(145deg, #fff9db, #ffe8cc);
            border-left: 5px solid #ff922b;
            padding: 20px;
            border-radius: 8px;
            margin-top: 25px;
        }
        
        .instructions h3 {
            color: #e67700;
            margin-bottom: 15px;
        }
        
        .instructions ol {
            padding-left: 25px;
        }
        
        .instructions li {
            margin-bottom: 10px;
            line-height: 1.6;
        }
        
        footer {
            text-align: center;
            padding: 25px;
            color: #7f8c8d;
            border-top: 1px solid #dee2e6;
            background-color: #f8f9fa;
        }
        
        @media (max-width: 992px) {
            .content {
                flex-direction: column;
            }
            
            h1 {
                font-size: 2.2rem;
            }
        }
        
        .positive {
            color: #27ae60;
            font-weight: bold;
        }
        
        .negative {
            color: #e74c3c;
            font-weight: bold;
        }
        
        .zero {
            color: #3498db;
            font-weight: bold;
        }
        
        .medal {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: linear-gradient(45deg, #FFD700, #FFA500);
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            margin-right: 10px;
            color: #8B4513;
            font-weight: bold;
        }
        
        .medal.silver {
            background: linear-gradient(45deg, #C0C0C0, #A9A9A9);
            color: #333;
        }
        
        .medal.bronze {
            background: linear-gradient(45deg, #CD7F32, #8B4513);
            color: white;
        }
        
        .stats-summary {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #3498db, #2c3e50);
            color: white;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            min-width: 200px;
            margin: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        
        .stat-card h3 {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }
        
        .stat-card .value {
            font-size: 2rem;
            font-weight: bold;
        }
        
        /* 分组卡片样式 - 横向排列 */
        .groups-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .group-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border-top: 5px solid #3498db;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .group-header {
            background: linear-gradient(90deg, #2c3e50, #34495e);
            color: white;
            padding: 15px;
            font-size: 1.3rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .group-count {
            background-color: #3498db;
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 1rem;
        }
        
        .group-members {
            padding: 15px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .member-tag {
            background-color: #e9f7fe;
            border: 1px solid #3498db;
            border-radius: 20px;
            padding: 8px 15px;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .member-tag:hover {
            background-color: #d1ecfc;
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }
        
        .member-tag i {
            color: #3498db;
            margin-right: 8px;
            font-size: 0.9rem;
        }
        
        .results-row {
            display: flex;
            gap: 25px;
        }
        
        .results-row > div {
            flex: 1;
        }
        
        @media (max-width: 768px) {
            .results-row {
                flex-direction: column;
            }
            
            .groups-container {
                grid-template-columns: 1fr;
            }
        }
        
        .highlight-box {
            background: linear-gradient(145deg, #fff9db, #ffe8cc);
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
            border-left: 4px solid #ff922b;
        }
        
        .highlight-box h4 {
            color: #e67700;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-chart-line"></i> 棋剑乐府查战功出勤系统</h1>
            <p class="subtitle">上传新旧战功数据CSV文件，分析成员战功变化情况，识别涨幅为0的成员</p>
        </header>
        
        <div class="content">
            <div class="upload-section">
                <h2 class="section-title"><i class="fas fa-file-upload"></i> 数据上传</h2>
                
                <div class="file-upload" id="oldFileUpload">
                    <i class="fas fa-file-csv"></i>
                    <h3>上传旧战功数据 (CSV)</h3>
                    <p>拖放文件或点击此处上传</p>
                    <input type="file" id="oldFile" accept=".csv" hidden>
                    <div class="file-info" id="oldFileInfo">尚未选择文件</div>
                </div>
                
                <div class="file-upload" id="newFileUpload">
                    <i class="fas fa-file-csv"></i>
                    <h3>上传新战功数据 (CSV)</h3>
                    <p>拖放文件或点击此处上传</p>
                    <input type="file" id="newFile" accept=".csv" hidden>
                    <div class="file-info" id="newFileInfo">尚未选择文件</div>
                </div>
                
                <button class="btn btn-analyze" id="analyzeBtn" disabled>开始分析战功涨幅</button>
                
                <div class="instructions">
                    <h3><i class="fas fa-info-circle"></i> 使用说明</h3>
                    <ol>
                        <li>CSV文件应包含以下字段：成员, 战功总量, 分组</li>
                        <li>确保两个文件中的成员名称一致以便正确匹配</li>
                        <li>系统将计算每个成员的战功涨幅（新战功 - 旧战功）</li>
                        <li>涨幅为0的成员将按分组展示</li>
                        <li>系统将显示战功涨幅最高的前20名成员</li>
                        <li>点击"使用示例数据"按钮可体验系统功能</li>
                    </ol>
                </div>
                
                <button class="btn" id="demoBtn">
                    <i class="fas fa-database"></i> 使用示例数据
                </button>
            </div>
            
            <div class="results-section">
                <h2 class="section-title"><i class="fas fa-chart-bar"></i> 分析结果</h2>
                
                <div class="stats-summary" id="statsSummary">
                    <div class="stat-card">
                        <h3><i class="fas fa-users"></i> 总成员数</h3>
                        <div class="value">0</div>
                    </div>
                    <div class="stat-card">
                        <h3><i class="fas fa-chart-line"></i> 平均涨幅</h3>
                        <div class="value">0</div>
                    </div>
                    <div class="stat-card">
                        <h3><i class="fas fa-percentage"></i> 涨幅为0成员</h3>
                        <div class="value">0</div>
                    </div>
                    <div class="stat-card">
                        <h3><i class="fas fa-layer-group"></i> 分组数量</h3>
                        <div class="value">0</div>
                    </div>
                </div>
                
                <div class="results-container">
                    <div class="zero-increase">
                        <h3><i class="fas fa-exclamation-circle"></i> 战功涨幅为0的成员（按分组）</h3>
                        <div class="groups-container" id="zeroIncreaseGroups">
                            <div class="no-data">
                                <i class="fas fa-database"></i>
                                <p>请上传CSV文件并点击分析按钮</p>
                            </div>
                        </div>
                        
                        <div class="highlight-box">
                            <h4><i class="fas fa-lightbulb"></i> 分析说明</h4>
                            <p>战功涨幅为0表示该成员在两次统计期间战功总量没有变化。这可能表示该成员近期未参与战斗或需要特别关注。</p>
                        </div>
                    </div>
                    
                    <div class="results-row">
                        <div class="top-increase">
                            <h3><i class="fas fa-trophy"></i> 战功涨幅排行榜 TOP20</h3>
                            <div class="table-container">
                                <table id="topIncreaseTable">
                                    <thead>
                                        <tr>
                                            <th>排名</th>
                                            <th>成员名称</th>
                                            <th>分组</th>
                                            <th>旧战功</th>
                                            <th>新战功</th>
                                            <th>涨幅</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="6" class="no-data">
                                                <i class="fas fa-chart-bar"></i>
                                                <p>分析结果将在此处显示</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <div class="top-increase">
                            <h3><i class="fas fa-info-circle"></i> 系统说明</h3>
                            <div class="instructions" style="margin-top: 20px;">
                                <h4>如何解读数据</h4>
                                <p>战功涨幅 = 新战功总量 - 旧战功总量</p>
                                
                                <h4>使用建议</h4>
                                <ul style="margin-top: 10px;">
                                    <li>检查长期战功为0的成员活跃度</li>
                                    <li>关注涨幅最高成员的作战策略</li>
                                    <li>对比不同分组的整体表现</li>
                                    <li>定期分析战功变化优化资源配置</li>
                                </ul>
                                
                                <h4>注意事项</h4>
                                <p>确保CSV文件格式正确，包含必要的列标题：成员、战功总量、分组。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 战功分析系统 | 基于Web的CSV数据分析工具 | 版本 3.0</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const oldFileInput = document.getElementById('oldFile');
            const newFileInput = document.getElementById('newFile');
            const oldFileUpload = document.getElementById('oldFileUpload');
            const newFileUpload = document.getElementById('newFileUpload');
            const oldFileInfo = document.getElementById('oldFileInfo');
            const newFileInfo = document.getElementById('newFileInfo');
            const analyzeBtn = document.getElementById('analyzeBtn');
            const demoBtn = document.getElementById('demoBtn');
            const zeroIncreaseGroups = document.getElementById('zeroIncreaseGroups');
            const topIncreaseTable = document.getElementById('topIncreaseTable');
            const statsSummary = document.getElementById('statsSummary');
            
            // 存储文件数据
            let oldFileData = null;
            let newFileData = null;
            
            // 旧文件上传处理
            oldFileUpload.addEventListener('click', () => oldFileInput.click());
            oldFileInput.addEventListener('change', function(e) {
                if (this.files.length > 0) {
                    const file = this.files[0];
                    oldFileInfo.textContent = `已选择: ${file.name} (${(file.size/1024).toFixed(2)} KB)`;
                    readCSVFile(file, 'old');
                }
            });
            
            // 新文件上传处理
            newFileUpload.addEventListener('click', () => newFileInput.click());
            newFileInput.addEventListener('change', function(e) {
                if (this.files.length > 0) {
                    const file = this.files[0];
                    newFileInfo.textContent = `已选择: ${file.name} (${(file.size/1024).toFixed(2)} KB)`;
                    readCSVFile(file, 'new');
                }
            });
            
            // 分析按钮事件
            analyzeBtn.addEventListener('click', analyzeData);
            
            // 示例数据按钮
            demoBtn.addEventListener('click', generateDemoData);
            
            // 文件拖放功能
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                oldFileUpload.addEventListener(eventName, preventDefaults, false);
                newFileUpload.addEventListener(eventName, preventDefaults, false);
            });
            
            ['dragenter', 'dragover'].forEach(eventName => {
                oldFileUpload.addEventListener(eventName, highlight, false);
                newFileUpload.addEventListener(eventName, highlight, false);
            });
            
            ['dragleave', 'drop'].forEach(eventName => {
                oldFileUpload.addEventListener(eventName, unhighlight, false);
                newFileUpload.addEventListener(eventName, unhighlight, false);
            });
            
            oldFileUpload.addEventListener('drop', handleDrop, false);
            newFileUpload.addEventListener('drop', handleDrop, false);
            
            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }
            
            function highlight(e) {
                this.style.borderColor = '#e74c3c';
                this.style.backgroundColor = '#f8f9fa';
            }
            
            function unhighlight(e) {
                this.style.borderColor = '#3498db';
                this.style.backgroundColor = 'white';
            }
            
            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                const targetId = this.id;
                
                if (files.length > 0) {
                    const file = files[0];
                    const fileType = targetId === 'oldFileUpload' ? 'old' : 'new';
                    
                    if (fileType === 'old') {
                        oldFileInfo.textContent = `已选择: ${file.name} (${(file.size/1024).toFixed(2)} KB)`;
                        readCSVFile(file, 'old');
                    } else {
                        newFileInfo.textContent = `已选择: ${file.name} (${(file.size/1024).toFixed(2)} KB)`;
                        readCSVFile(file, 'new');
                    }
                }
            }
            
            // 读取CSV文件
            function readCSVFile(file, type) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    const content = e.target.result;
                    const rows = content.split('\n');
                    const headers = rows[0].split(',').map(h => h.trim());
                    
                    // 找到需要的列索引
                    const memberIndex = headers.indexOf('成员');
                    const combatIndex = headers.indexOf('战功总量');
                    const groupIndex = headers.indexOf('分组');
                    
                    if (memberIndex === -1 || combatIndex === -1 || groupIndex === -1) {
                        alert('CSV文件缺少必要的列：成员、战功总量、分组');
                        return;
                    }
                    
                    const data = [];
                    
                    for (let i = 1; i < rows.length; i++) {
                        if (rows[i].trim() === '') continue;
                        
                        const cols = rows[i].split(',');
                        if (cols.length < Math.max(memberIndex, combatIndex, groupIndex) + 1) continue;
                        
                        const member = cols[memberIndex].trim();
                        const combat = parseInt(cols[combatIndex].trim()) || 0;
                        const group = cols[groupIndex].trim();
                        
                        data.push({
                            member: member,
                            combat: combat,
                            group: group
                        });
                    }
                    
                    if (type === 'old') {
                        oldFileData = data;
                    } else {
                        newFileData = data;
                    }
                    
                    // 检查是否可以启用分析按钮
                    if (oldFileData && newFileData) {
                        analyzeBtn.disabled = false;
                    }
                };
                
                reader.readAsText(file, 'UTF-8');
            }
            
            // 分析数据
            function analyzeData() {
                if (!oldFileData || !newFileData) return;
                
                // 创建成员映射以便快速查找
                const oldDataMap = new Map();
                oldFileData.forEach(item => {
                    oldDataMap.set(item.member, item);
                });
                
                // 计算涨幅
                const increaseData = [];
                const zeroIncreaseMap = new Map();
                let totalIncrease = 0;
                let totalMembers = 0;
                
                newFileData.forEach(newItem => {
                    const oldItem = oldDataMap.get(newItem.member);
                    if (oldItem) {
                        const increase = newItem.combat - oldItem.combat;
                        const result = {
                            member: newItem.member,
                            oldCombat: oldItem.combat,
                            newCombat: newItem.combat,
                            increase: increase,
                            group: newItem.group
                        };
                        
                        increaseData.push(result);
                        totalIncrease += increase;
                        totalMembers++;
                        
                        // 记录涨幅为0的成员
                        if (increase === 0) {
                            if (!zeroIncreaseMap.has(newItem.group)) {
                                zeroIncreaseMap.set(newItem.group, []);
                            }
                            zeroIncreaseMap.get(newItem.group).push(result);
                        }
                    }
                });
                
                // 更新统计数据
                updateStats(increaseData, zeroIncreaseMap, totalMembers, totalIncrease);
                
                // 显示涨幅为0的成员（按分组）
                displayZeroIncrease(zeroIncreaseMap);
                
                // 显示涨幅最高的20名成员
                displayTopIncrease(increaseData);
            }
            
            // 更新统计数据
            function updateStats(data, zeroMap, totalMembers, totalIncrease) {
                const statCards = statsSummary.querySelectorAll('.stat-card .value');
                const zeroCount = Array.from(zeroMap.values()).reduce((sum, arr) => sum + arr.length, 0);
                const groupCount = new Set(data.map(item => item.group)).size;
                const avgIncrease = totalMembers > 0 ? (totalIncrease / totalMembers).toFixed(0) : 0;
                
                statCards[0].textContent = totalMembers.toLocaleString();
                statCards[1].textContent = avgIncrease.toLocaleString();
                statCards[2].textContent = zeroCount.toLocaleString();
                statCards[3].textContent = groupCount.toLocaleString();
            }
            
            // 显示涨幅为0的成员（按分组）
            function displayZeroIncrease(zeroMap) {
                zeroIncreaseGroups.innerHTML = '';
                
                if (zeroMap.size === 0) {
                    zeroIncreaseGroups.innerHTML = `
                        <div class="no-data">
                            <i class="fas fa-check-circle"></i>
                            <p>没有战功涨幅为0的成员</p>
                        </div>
                    `;
                    return;
                }
                
                // 按分组名称排序
                const sortedGroups = Array.from(zeroMap.keys()).sort();
                
                sortedGroups.forEach(group => {
                    const members = zeroMap.get(group);
                    
                    const groupCard = document.createElement('div');
                    groupCard.className = 'group-card';
                    
                    groupCard.innerHTML = `
                        <div class="group-header">
                            <div>${group}组</div>
                            <div class="group-count">${members.length}人</div>
                        </div>
                        <div class="group-members">
                            ${members.map(member => `
                                <div class="member-tag">
                                    <i class="fas fa-user"></i> ${member.member}
                                </div>
                            `).join('')}
                        </div>
                    `;
                    
                    zeroIncreaseGroups.appendChild(groupCard);
                });
            }
            
            // 显示涨幅最高的20名成员
            function displayTopIncrease(data) {
                const tbody = topIncreaseTable.querySelector('tbody');
                tbody.innerHTML = '';
                
                if (data.length === 0) {
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="6" style="text-align: center; padding: 20px; color: #6c757d;">
                                <i class="fas fa-exclamation-triangle"></i>
                                <p>没有找到数据</p>
                            </td>
                        </tr>
                    `;
                    return;
                }
                
                // 按涨幅降序排序
                data.sort((a, b) => b.increase - a.increase);
                
                // 取前20名
                const top20 = data.slice(0, 20);
                
                top20.forEach((item, index) => {
                    const row = document.createElement('tr');
                    
                    // 添加奖牌标识
                    let rankHTML = `${index + 1}`;
                    if (index === 0) {
                        rankHTML = `<span class="medal">1</span>`;
                    } else if (index === 1) {
                        rankHTML = `<span class="medal silver">2</span>`;
                    } else if (index === 2) {
                        rankHTML = `<span class="medal bronze">3</span>`;
                    }
                    
                    // 根据涨幅值设置样式
                    const increaseClass = item.increase > 0 ? 'positive' : 
                                        item.increase < 0 ? 'negative' : 'zero';
                    const increaseSign = item.increase > 0 ? '+' : '';
                    
                    row.innerHTML = `
                        <td>${rankHTML}</td>
                        <td>${item.member}</td>
                        <td>${item.group}</td>
                        <td>${item.oldCombat.toLocaleString()}</td>
                        <td>${item.newCombat.toLocaleString()}</td>
                        <td class="${increaseClass}">${increaseSign}${item.increase.toLocaleString()}</td>
                    `;
                    
                    tbody.appendChild(row);
                });
            }
            
            // 生成示例数据
            function generateDemoData() {
                // 创建示例数据
                const groups = ['秦歌', '秦时', '秦狩', '魔都', '酒香', '秦王'];
                const members = ['张飞', '关羽', '赵云', '马超', '黄忠', '吕布', '典韦', '许褚', 
                                '夏侯惇', '夏侯渊', '张辽', '徐晃', '张郃', '甘宁', '周泰', '太史慈'];
                
                // 生成旧数据
                oldFileData = [];
                for (let i = 0; i < 150; i++) {
                    const member = members[Math.floor(Math.random() * members.length)] + (i+1);
                    const group = groups[Math.floor(Math.random() * groups.length)];
                    const combat = Math.floor(Math.random() * 1000000) + 50000;
                    
                    oldFileData.push({
                        member: member,
                        combat: combat,
                        group: group
                    });
                }
                
                // 生成新数据（基于旧数据）
                newFileData = oldFileData.map(item => {
                    const increase = Math.floor(Math.random() * 50000) - 10000;
                    return {
                        ...item,
                        combat: item.combat + increase
                    };
                });
                
                // 添加一些涨幅为0的成员
                for (let i = 0; i < 30; i++) {
                    const group = groups[Math.floor(Math.random() * groups.length)];
                    newFileData.push({
                        member: `固定成员${i+1}`,
                        combat: 100000,
                        group: group
                    });
                    oldFileData.push({
                        member: `固定成员${i+1}`,
                        combat: 100000,
                        group: group
                    });
                }
                
                // 设置文件信息显示
                oldFileInfo.textContent = "已选择: 旧战功数据.csv (示例数据)";
                newFileInfo.textContent = "已选择: 新战功数据.csv (示例数据)";
                analyzeBtn.disabled = false;
                
                // 自动分析
                setTimeout(analyzeData, 500);
            }
        });
    </script>
</body>
</html>